<template>
    <div class="max-w-[1000px] mx-auto">
        <Title :title="title" :content="content" v-if="title || content" class="mb-20px" />
        <v-expansion-panels variant="accordion" class="px-4 bg-[#fff] text-left!" v-model:model-value="active">
            <v-expansion-panel v-for="(item, i) in list" :key="i">
                <template #text>
                    <a class="text-[15px] font-avenir font-200 text-[#666]">
                        {{ item.value }}
                    </a>
                </template>
                <template #title>
                    <div class="font-bold font-avenir" :class="{
                        'text-[#11A66A]': active == i - 1,
                    }">
                        {{
                            item.title
                        }}
                    </div>
                </template>
            </v-expansion-panel>
        </v-expansion-panels>
    </div>
</template>


<script setup lang="ts">
import { Title } from "../Title";
defineProps<{
    title?: string
    content?: string
    list?: Record<string, string>[]
}>()
const active = ref(void 0)
</script>


<style lang="scss" scoped>
:deep(.v-expansion-panel-title) {
    // padding: 15px 2px 0 2px  !important;
    padding: 15px 2px !important;
    background-color: #fff;
}

:deep(.v-expansion-panel-text) {
    // padding: 15px 2px 0 2px  !important;
    position: relative;
    top: -16px;
}

:deep(.v-expansion-panel-text__wrapper) {
    padding: 0 2px 0px !important;
    background-color: #fff;
}

:deep(.v-expansion-panel-title__overlay) {
    background-color: #fff !important;
    /* background-color: #fff !important; */
}
</style>